import axios from "axios"
import store from "@/store"
import router from "@/router"
// 1.配置axios
// 1.1创建新的axios实例，配置接口基准路径，和其他配置
// 1.2配置请求拦截器，把token放到请求头里面
// 1.3配置响应拦截器，剥离一层没有用的数据，处理401登录失效，跳转到登录页
const instance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/',
  timeout: 5000
})
//请求拦截器
instance.interceptors.request.use((config) => {
  // 这里需要做的就是携带token
  // token存储在user中的profile中
  const { profile } = store.state.user
  if (profile.token) {
    config.headers.Authorization = `Bearer ${profile.token} `
  }
  return config
}, err => Promise.reject(err))

// 响应拦截器
// ret==={headers,config,data,...}其中data才是后台数据
// ret => ret.data这个箭头函数的意思就是把ret中的data返回出去，以后axios的响应成功结果就是后台的data数据
instance.interceptors.response.use(ret => ret.data,
  //响应失败了就需要return一个promise
  err => {
    //401会走这里，其他错误也会走这包括500，所以在处理时需要判断状态码
    // 这个代码的意思就是如果有响应并且响应的状态码是401的时候需要处理
    if (err.response && err.response.status === 401) {
      // 这里如果状态码是401就需要跳转到登录
      router.push('/login')
    }

    return Promise.reject(err)
  })
// 2.封装工具函数
// 2.1这个工具函数有三个参数：url,method,submitData(不用考虑提交数据放在哪个选项里)
// 2.2函数里面的逻辑：需要根据method去把提交数据放置对应的选项即可
// 2.3返回一个axios调用后的promise返回即可
// 请求工具函数
// url: 请求地址，string类型
// method：请求方式，string类型
// submitData: 提交数据, object类型
// return Promise对象
const request = (url, method, submitData) => {
  // 这就是在调用axios
  // axios(url,method,params,data)===instance(url,method,params,data)等价的
  return instance({
    url,
    method,
    // submitData应该放在哪个选项里
    // 当请求方式是get放在params里，当是其他请求方式的时候一概放在data里面
    // []使用中括号插入动态的key,中括号里面可以写变量，可以写三元，可以写js表达式
    // method传入，可能是get Get GET ,为了程序健壮些需要把get转成小写再去匹配
    [method.toLowerCase() === 'get' ? "params" : 'data']: submitData
  })
}
// 将request导出去给别人使用，给api使用
export default request